import React, { Component } from 'react';
import { Upload ,Button, Icon } from 'antd';
import {inject, observer} from 'mobx-react';
import VideoPlayer from "../components/common/VideoPlayer"
import { TESTCARPICTURE } from "../service/api/FaceRecognitionApi";

const introduces = [
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/IndustryOCRRecognitionAlgorithms/1.png",
    title:"支持多种制式材料",
    desc: "内嵌丰富的算法库，轻松应对多项日常票据材料的自动化处理需求，大幅降低人力成本，避免人工错误。"
  },
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/IndustryOCRRecognitionAlgorithms/2.png",
    title:"高识别率",
    desc: "对规范行业材料中文字的识别率达到99%以上，可处理轻度图像偏转变形等特殊情况。"
  },
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/IndustryOCRRecognitionAlgorithms/3.png",
    title:"扩展性好",
    desc: "可以轻松融合云粒自然语言处理的算法能力，对识别后的文本进行智能分析，进一步优化业务流程。"
  },
  {
    icon:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/IndustryOCRRecognitionAlgorithms/4.png",
    title:"识别效率高",
    desc: "可以实现等同于图像采集速度的识别，让人工智能处理不再是业务流程的瓶颈。"
  },
]

const videoJsOptions = {
  controls: true,
  sources: [{
    src: 'https://vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }]
}

const checkImgList = [
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/industryOcr/demoPicture1.png",
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/industryOcr/demoPicture2.png",
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/industryOcr/demoPicture3.png",
  "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/industryOcr/demoPicture4.png"
]

const str = '人脸识别';
@inject ('FaceRecognitionStore')
@observer
export default class componentName extends Component {
  state = { ocrList:[],checkIndex: 0 , previewImg: checkImgList[0] , checkState: false , changeImg: undefined }
  componentDidMount() {
    window.scrollTo(0,0)
  }
  renderCheckImgList = () => {
    const { changeImg } = this;
    const { checkIndex } = this.state;
    return checkImgList.map((item,key)=> {
      let className = "yl-ai-body-text-simple-img";
      if(checkIndex == key ) {
        className += ' img-change';
      }
      return <div onClick={()=> { changeImg(key)}} className = { className } key={'img_'+key }>
      <img title="" alt="" src={item}/>
    </div>
    })
  }
  changeImg = (i) => {
    this.setState({
      ocrList:[],
      checkIndex: i,
      checkState: false,
      previewImg: checkImgList[i]
    })
  }
  checkQuery = () => {
    const { previewImg , changeImg } = this.state;
    this.setState({
      checkState: true
    })
    const formData = new FormData();
    formData.append("src", previewImg);
    TESTCARPICTURE(formData).then(rs=> {
      this.setState({
        checkState: undefined,
        previewImg: 'data:image/jpg;base64,'+rs.data.b64 ,
        // ocrList: rs.data.data.detect || []
        ocrList:['aaaaa','nnnnn']
      })
    })
  }
  render() {
    const _that = this;
    const { checkQuery } = this;
    const { previewImg , checkState , ocrList} = this.state;
    const uploadProps = {
      beforeUpload(e) {
        const file = e;
        var fr = new FileReader ();
       
        fr.onload = () => {
          const fileType = 'image/pngimage/jpgimage/jpeg';
          if (fileType.indexOf (file.type) < 0) {
            return false;
          } else if (file.size > 1024 * 1024) {
            return false;
          } else {
            var dataURL = fr.result; // picture_base64
            _that.setState({
              checkIndex: -1,
              checkState: false,
              previewImg: dataURL
            })
          }
        };
        fr.readAsDataURL (file);
        return false;
      }
    }
    return (
      <div className="yl-ai-body-container">
        <div className="yl-ai-body-banner yl-ai-industryOCRRecognitionAlgorithms">
            <div className="yl-ai-banner-opicity"></div>
            <div className="yl-ai-banner-txt">
                <div className="yl-ai-banner-title">行业OCR识别算法</div>
                <div className="yl-ai-banner-desc">能够通过简单设置即可识别日常票据材料，识别准确率99%以上，轻松应对偏转变形图像，可与自然语义分析结合使用。</div>
            </div>
        </div>

        <div className="yl-ai-body-container">
          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title">产品亮点</div>
            <div className="yl-ai-body-max-width">
            <div className="yl-ai-body-introduces">
            {
              introduces.map((item,key)=> {
                return (
                  <div className="yl-ai-body-introduce">
                    <div className="yl-ai-body-introduce-icon">
                      <img src={item.icon}/>
                    </div>
                    <div className="yl-ai-body-introduce-text">  
                      <div className="yl-ai-body-introduce-title">{item.title}</div>
                      <div className="yl-ai-body-introduce-desc">{item.desc}</div>
                    </div>
                  </div>
                )
              })
            }
        </div>

            </div>
          </div>

          <div className="yl-ai-body-container-panel">
            <div className="yl-ai-body-title have-subtitle">功能演示</div>
            <div className="yl-ai-body-max-width">
              <div className="yl-ai-body-test-simple">
                  <div className="yl-ai-body-test-simple-left">
                    <div className="yl-ai-body-text-simple-img-change">
                      {
                        !checkState && checkState !== undefined && <div onClick = { ()=> { checkQuery() } } className="yl-ai-check-button">检测图片</div>
                      }
                      {
                        checkState && <div className="scan-panel"></div>
                      }
                      <img  src= {previewImg} alt="" title=""/>
                    </div>
                   
                    <div className="yl-ai-body-text-simple-imgs">
                      {
                        this.renderCheckImgList()
                      }
                    </div>
                  </div>
                  <div className="yl-ai-body-test-simple-right">
                      
                      {
                        ocrList.map((item,key)=> {
                          return <div className="yl-ai-body-test-result-line">
                          <span>{item || '--'}</span></div>
                        })
                      }

                  </div>
              </div>
            </div>
          </div>

          <div className="yl-ai-body-container-panel yl-ai-body-app-scene">
            <div className="yl-ai-body-title">应用场景</div>
            <div className="yl-ai-body-max-width ">
              <div className="yl-ai-humanRecognitionTracking-scene">
                <div className="yl-ai-humanRecognitionTracking-scene-desc">
                    <div className="yl-ai-humanRecognitionTracking-scene-title">业务流程自动化</div>
                    <div className="yl-ai-humanRecognitionTracking-scene-desc">通过把非结构化图片（如发票、维修工单、快递单等）进行结构化处理，可以实现管理机构内流程的自动化和业务优化。辅以文本分析、语义处理等进一步人工智能技术的处理，可以更大程度上提升业务流程效率。</div>
                </div>

                <div className="yl-ai-humanRecognitionTracking-scene-img">
                    <img className="scene-img" src="https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/industryOcr/ocrExample.png" title="" alt=""/>
                    <div className="base-bg1"><div></div></div>
                    <div className="base-bg2"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}